<template>
	<el-container class="login-container">
		<div class="login-wrapper">
			<div class="header">Register</div>
			<div class="form-wrapper">
				<el-form :model="data" :rules="rules" ref="Ref">
					<el-form-item prop="username">
						<el-input v-model="data.username" placeholder="username"></el-input>
					</el-form-item>
					<el-form-item prop="email">
						<el-input v-model="data.email" placeholder="email"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="data.password" placeholder="password" show-password></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input v-model="data.confirm_password" placeholder="confirm password"
								  show-password></el-input>
					</el-form-item>
					<button class="btn" type="button" @click="register()">Register</button>
				</el-form>

			</div>
			<div class="msg">
				Already have account?
				<router-link to="/login">Login</router-link>
			</div>
		</div>
	</el-container>
</template>

<script>
import {
	ElMessage
} from 'element-plus';

import api from '../api';

export default {
	data() {
		return {
			data: {
				username: '',
				email: '',
				password: '',
				confirm_password: ''
			},
			rules: {
				username: [{
					required: true,
					message: 'Please input username',
					trigger: 'blur'
				},
					{
						min: 6,
						max: 20,
						message: 'Length should be 6 to 20',
						trigger: 'blur'
					}
				],
				email: [{
					type: 'email',
					message: 'Incorrect email format',
					trigger: 'blur'
				}
				],
				password: [{
					required: true,
					message: 'Please input password',
					trigger: 'blur'
				},
					{
						min: 6,
						max: 20,
						message: 'Length should be 6 to 20',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		async register() {
			try {
				const res = await api.register(this.data);
				if (res.data.code === 201) {
					ElMessage.success('Register success');
					this.$router.push('/login');
				} else {
					ElMessage.error(res.data.msg);
				}
			} catch (error) {
				console.log(error);
			}
		},
		check() {
			this.$refs.Ref.validate((valid) => {
				if (valid) {
					this.register();
				} else {
					return false;
				}
			})
		}
	},
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}

.login-container {
	height: 100%;
}

.login-wrapper {
	background-color: #fff;
	width: 358px;
	height: 588px;
	border-radius: 15px;
	padding: 0 50px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, .55);
	backdrop-filter: blur(10px);
}

.header {
	font-size: 38px;
	font-weight: bold;
	text-align: center;
	line-height: 200px;
}

.el-form-item {
	margin-bottom: 20px;
}

.btn {
	border: 0;
	text-align: center;
	height: 40px;
	padding: 10px;
	width: 100%;
	margin-top: 20px;
	background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
	color: #fff;
}

.btn:hover {
	background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.btn:active {
	transform: translateY(2px);
}

.msg {
	text-align: center;
	line-height: 88px;
}
</style>